<template>
    <div>
        <div>
            <el-form :inline="true" ref="queryForm" :model="queryForm">
                <el-form-item>
                    <el-input v-model="queryForm.content" placeholder="按关键字查询"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" @click="search" type="danger">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180px">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="评论者">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
            <el-table-column
                    prop="createDate"
                    label="评论时间">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="150px"
                    label="操作">
                <template slot-scope="scope">
                    <el-link @click="del(scope.row)" :underline="false" type="danger" class="el-icon-delete">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :current-page="pageNo"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import {del, query} from '@/api/comment'

    export default {
        name: "Index",
        data() {
            return {
                queryForm: {
                    content: ''
                },
                tableData: [],
                total: 0,
                pageNo: 1,
                pageSize: 8,
            }
        },
        mounted() {
            this.list({"page":this.pageNo})
        },
        methods: {
            //点击页码触发事件
            handleCurrentChange(val) {
                let param = this.queryForm
                this.pageNo = val;
                param.page = this.pageNo
                this.list(param)
            },
            //条件查询
            search() {
                let param = this.queryForm;
                //初始化当前页码
                this.pageNo = 1;
                param.page = this.pageNo;
                this.list(param);
            },
            //查询
            list(param) {
                query(param).then(data => {
                    this.tableData = data.list
                    this.total = data.total
                }).catch(error => {
                    this.$message.error(error);
                })
            },

            //删除
            del(row) {
                this.$confirm('确定要删除吗？','提示').then(() => {
                    del(row.id).then(data => {
                        //删除完成之后重新加载表格数据
                        let param = this.queryForm;
                        param.page = this.pageNo;
                        this.list(param);
                        this.$message.success(data.msg);
                    }).catch(error => {
                        this.$message.error(error);
                    })
                });
            },
        }
    }
</script>

<style scoped>

</style>